<template>
    <div class="box">
        <leftTitle title="场地使用"></leftTitle>
        <div class="content">
            <chart :option="option" :key="key"></chart>
        </div>
    </div>
</template>

<script setup lang="ts">
import leftTitle from './leftTitle.vue';
import chart from './components/chart.vue';
import { ref, onMounted } from 'vue'
import { get } from '@/request/methods';

const key = ref(0)


const option = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#b005ff' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#2836ff' // 100% 处的颜色
                        }
                    ]
                },
                borderRadius: 50
            },
            data: []
        }
    ]
});

get({ url: '/v1.0/api/deviceWorking/venueUse' }).then(res => {
    let data = res.data.data
    // console.log(data);
    key.value = +new Date()
    data.forEach((item: { title: never; value: never; }) => {
        // console.log(item);
        option.value.xAxis[0].data.push(item.title)
        option.value.series[0].data.push(item.value)
    })
})



</script>

<style lang="scss" scoped>
.box {
    width: 75%;
    height: calc(30% - 30px);
    margin-left: 70px;

    .content {
        background-color: rgba(255, 255, 255, .1);
        width: 100%;
        height: calc(100% - 45px);
        margin-top: 10px;
    }
}
</style>